/**
 * useTransition
 *
 *    概念：
 *      是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook。
 *      是一个React18版本开始新增的 hook
 *      React18版本开始，有两种更新状态的任务，
 *          一种叫做 立刻更新任务【紧急】
 *          一种叫做 过渡更新任务【非紧急】 它可以被React内部中断或中止
 *
 *    语法：
 *      const [isPending, startTransition] = useTransition()
 *
 *        isPending: 表示过滤任务是否正在进行中的一个布尔值
 *        startTransition: 是一个函数，在这个人函数的回调函数中更新的状态就会被标记为 过滤任务
 */

import { useState, memo, useTransition } from "react";

function AboutTab() {
  return <p>Welcome to my profile!</p>;
}

const PostsTab = memo(function PostsTab() {
  // 打印一次。真正变慢的地方在 SlowPost 内。
  console.log("[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />");

  let items = [];
  for (let i = 0; i < 5000; i++) {
    items.push(<SlowPost key={i} index={i} />);
  }
  return <ul className="items">{items}</ul>;
});

function SlowPost({ index }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // 每个 item 都等待 1 毫秒以模拟极慢的代码。
  }

  return <li className="item">Post #{index + 1}</li>;
}

function ContactTab() {
  return (
    <>
      <p>You can find me online here:</p>
      <ul>
        <li>admin@mysite.com</li>
        <li>+123456789</li>
      </ul>
    </>
  );
}

function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>;
  }

  if (isPending) {
    return <b className="pending">{children}</b>;
  }

  return (
    <button
      onClick={() => {
        startTransition(() => {
          // 在这儿的代码如果涉及到更新状态，则该更新状态会被标记为过滤任务
          onClick();
        });
      }}
    >
      {children}
    </button>
  );
}

export default function TabContainer() {
  // 用于表示当前高亮的 tab
  const [tab, setTab] = useState("about");
  return (
    <>
      <TabButton isActive={tab === "about"} onClick={() => setTab("about")}>
        About
      </TabButton>
      <TabButton isActive={tab === "posts"} onClick={() => setTab("posts")}>
        Posts (slow)
      </TabButton>
      <TabButton isActive={tab === "contact"} onClick={() => setTab("contact")}>
        Contact
      </TabButton>
      <hr />
      {tab === "about" && <AboutTab />}
      {tab === "posts" && <PostsTab />}
      {tab === "contact" && <ContactTab />}
    </>
  );
}
